<%--
  Created by IntelliJ IDEA.
  User: zhangls
  Date: 2016/10/26 0026
  Time: 11:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- BEGIN SLIDER -->
<div class="page-slider margin-bottom-35">
  <!--LayerSlider begin-->
  <div id="layerslider" style="width: 100%; height: 494px; margin: 0 auto;">
    <!--LayerSlider layer-->
    <div class="ls-layer ls-layer1" style="slidedirection: right; transition2d: 24,25,27,28;">
      <img src="/super-shop/shop/assets/temp/sliders/slide1/bg.jpg" class="ls-bg" alt="Slide background">
      <div class="ls-s-1 title" style=" top: 96px; left: 35%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
        重点 <strong>推荐 + 收藏</strong> 大师设计操刀
      </div>
      <div class="ls-s-1 mini-text" style=" top: 338px; left: 35%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; showuntil : 4000; white-space: nowrap;">
        Lorem 眼镜 爆款 <br/>你值得拥有！
      </div>
    </div>

    <!--LayerSlider layer-->
    <div class="ls-layer ls-layer2" style="slidedirection: right; transition2d: 110,111,112,113; ">
      <img src="/super-shop/shop/assets/temp/sliders/slide2/bg.jpg" class="ls-bg" alt="Slide background">
      <div class="ls-s-1 ls-title title" style=" top: 40%; left: 21%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
        <strong class="title">Apple 产品</strong>
        iphone 7 & ipad & Mac Book
        <em class="title">电子产品</em>
      </div>

      <div class="ls-s-2 ls-price title" style=" top: 50%; left: 45%; slidedirection : fade; slideoutdirection : fade; durationout : 109750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap;">
        <b>售价</b>
        <strong><span>￥</span>350</strong>
      </div>

      <a href="#" class="ls-s-1 ls-more mini-text" style=" top: 72%; left: 21%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; display: inline-block; white-space: nowrap;">
        产品详细
      </a>
    </div>

    <!--LayerSlider layer-->
    <div class="ls-layer ls-layer3" style="slidedirection: right; transition2d: 92,93,105; ">
      <img src="/super-shop/shop/assets/temp/sliders/slide3/bg.jpg" class="ls-bg" alt="Slide background">

      <div class="ls-s-1 ls-title" style=" top: 83px; left: 33%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
        女士专区 & 男士专区
        <strong>爆款</strong>
        你值得拥有！！！
      </div>

      <div class="ls-s-1" style=" top: 333px; left: 33%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap; font-size: 20px; font: 20px 'Open Sans Light', sans-serif;">
        <a href="#" class="ls-buy">
          立即购买
        </a>
        <div class="ls-price">
          <span>所有爆款仅售:</span>
          <strong>25<sup>￥</sup></strong>
        </div>
      </div>
    </div>

    <!--LayerSlider layer-->
    <div class="ls-layer ls-layer5" style="slidedirection: right; transition2d: 110,111,112,113; ">
      <img src="/super-shop/shop/assets/temp/sliders/slide5/bg.jpg" class="ls-bg" alt="Slide background">

      <div class="ls-s-1 title" style=" top: 35%; left: 60%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
        女士饰品<br>
        最低6折，快来抢购哇！
      </div>

      <div class="ls-s-1 mini-text" style=" top: 70%; left: 60%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap;">
        <span>正品专柜</span>
        <a href="#">立即购买</a>
      </div>
    </div>
  </div>
  <!--LayerSlider end-->
</div>
<!-- END SLIDER -->
